<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>util 组件 - layui</title>

    <link rel="stylesheet" href="./assets/dist/css/layui.css" />

    <style>
      body {
        padding: 50px;
      }
    </style>
  </head>
  <body>
    <fieldset class="layui-elem-field">
      <legend>默认 body 委托元素</legend>
      <div class="layui-field-box">
        <button class="layui-btn" lay-on="e1">事件 e1</button>
        <button class="layui-btn" lay-on="e2">事件 e2</button>
        <button class="layui-btn" lay-on="e3">事件 e3</button>
        <button class="layui-btn" lay-bind="e1">
          hover: lay-bind - 事件 e1
        </button>
        <button class="layui-btn" lay-active="e1">
          hover: lay-active - 事件 e1
        </button>
        <button class="layui-btn layui-btn-primary" lay-on="getBodyEvents">
          查看 body 的事件集合
        </button>
      </div>
    </fieldset>

    <br /><br />

    <fieldset class="layui-elem-field">
      <legend>自定义委托元素</legend>
      <div class="layui-field-box">
        <div id="ID-util-on-test">
          <button class="layui-btn" lay-on="e1">事件 e1 - 测试阻止冒泡</button>
          <button class="layui-btn" lay-on="e5">事件 e5</button>
          <button class="layui-btn" lay-on="e6">hover: 事件 e6</button>
          <button class="layui-btn layui-btn-primary" lay-on="getElemEvents">
            查看该委托元素的事件集合
          </button>
        </div>
      </div>
    </fieldset>

    <hr />

    <div id="test"></div>

    <hr />

    <div id="test1"></div>

    <hr />

    请编辑格式：
    <div class="layui-inline">
      <input
        type="text"
        value="yyyy-MM-dd HH:mm:ss"
        class="layui-input"
        id="test2"
      />
    </div>
    <span class="layui-word-aux" id="test3"></span>

    <hr />

    <div
      id="target-test"
      style1="position: relative; height: 300px; overflow: auto;"
    >
      1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
    </div>

    <script src="./assets/dist/layui.js"></script>
    <script>
      layui.use(['lay', 'util', 'layer'], () => {
        var $ = layui.$;
        var util = layui.util;
        var layer = layui.layer;
        var lay = layui.lay;

        // 固定块
        util.fixbar({
          bars: [
            {
              // 定义可显示的 bar 列表信息 -- v2.8.0 新增
              type: 'share',
              icon: 'layui-icon-share',
            },
            {
              type: 'help',
              icon: 'layui-icon-help',
            },
            {
              type: 'cart',
              icon: 'layui-icon-cart',
              style: 'background-color: #FF5722;',
            },
            {
              type: 'groups',
              content: '群',
              style: 'font-size: 21px;',
            },
          ],
          // bar1: true,
          // bar2: true,
          // default: false, 是否显示默认的 bar 列表 --  v2.8.0 新增
          // bgcolor: '#393D52', // bar 的默认背景色
          // css: {right: 100, bottom: 100},
          // target: '#target-test', // 插入 fixbar 节点的目标元素选择器
          // duration: 300, // top bar 等动画时长（毫秒）
          on: {
            // 任意事件 --  v2.8.0 新增
            mouseenter: function (type) {
              layer.tips(type, this, {
                tips: 4,
                fixed: true,
              });
            },
            mouseleave: (type) => {
              layer.closeAll('tips');
            },
          },
          // 点击事件
          click: function (type) {
            console.log(this, type);
            // layer.msg(type);
          },
        });

        // 批量处理事件
        util.on({
          e1: (othis) => {
            alert(othis.html());
          },
          e2: (othis) => {
            alert('body:' + othis.html());
          },
          getBodyEvents: (othis, e) => {
            var dataCache = $(e.delegateTarget).data('UTIL_ON_DATA');
            console.log(dataCache.events);
          },
        });

        // Test: 事件集的替换和增加
        util.on({
          e1: (othis) => {
            // 重置事件 e1
            alert(othis.html() + ' - replace');
          },
          e3: (othis) => {
            // 增加事件 e3
            alert(othis.html());
          },
        });

        // 自定义触发事件的元素属性名、自定义触发事件的方式
        util.on(
          'lay-bind',
          {
            e1: layui.throttle(function (othis) {
              layer.tips(othis.html(), this, { tips: 3 });
            }, 3000), // 3s 内不重复执行
            e2: () => {
              console.log(111);
            },
          },
          {
            trigger: 'mouseenter',
          },
        );
        // Test: 不同属性、相同值
        util.on(
          'lay-active',
          {
            e1: function (othis) {
              this.innerHTML =
                'hover: lay-active - 事件 e1 - ' +
                ((Math.random() * 100000) | 0);
            },
          },
          {
            trigger: 'mouseenter',
          },
        );

        // 自定义触发事件的委托元素
        util.on(
          {
            // 此处与委托在 body 上的事件共用了 e1 名称，以测试事件冒泡
            e1: function (othis, e) {
              this.innerHTML = 'click: ' + ((Math.random() * 100000) | 0);
              layui.stope(e); // 阻止事件冒泡
            },
            e5: function (othis, e) {
              this.innerHTML = 'click: ' + ((Math.random() * 100000) | 0);
            },
            getElemEvents: (othis, e) => {
              var dataCache = $(e.delegateTarget).data('UTIL_ON_DATA');
              console.log(dataCache.events);
            },
          },
          {
            elem: '#ID-util-on-test',
          },
        );

        // 自定义触发事件的委托元素 + 自定义触发事件
        util.on(
          {
            e6: function (othis, e) {
              this.innerHTML =
                'hover: 事件 e6 - ' + ((Math.random() * 100000) | 0);
            },
          },
          {
            elem: '#ID-util-on-test',
            trigger: 'mouseenter',
          },
        );

        // 倒计时
        var countdown = util.countdown({
          date: '2099-12-31 00:00:00', // 目标时间值
          now: new Date(), // 当前时间，一般为服务器时间，此处以本地时间为例
          ready: () => {
            // 初始操作
            clearTimeout(util.countdown.timer); // 清除旧定时器，防止多次渲染时重复执行。实际使用时不常用
          },
          clock: (obj, inst) => {
            // 计时中
            var str = [obj.d, '天', obj.h, '时', obj.m, '分', obj.s, '秒'].join(
              ' ',
            );
            lay('#test').html(str);
            util.countdown.timer = inst.timer; // 记录当前定时器，以便在重复渲染时清除。实际使用时不常用
          },
          done: (obj, inst) => {
            // 计时完成
            layer.msg('Time is up');
          },
        });

        // 某个时间在当前时间的多久前
        var str = util.timeAgo(new Date(2017, 7, 15, 2, 58, 0));
        $('#test1').html('示例写于：' + str);

        // 转换日期格式
        var timer = null;
        var toDateString = (format) => {
          var dateString = util.toDateString(new Date(), format);
          $('#test3').html(dateString);
        };
        timer = setInterval(() => {
          toDateString($('#test2').val());
        }, 50);

        console.log(
          util.toDateString('2025-3-8 12:30:00') === '2025-03-08 12:30:00',
        );
        console.log(
          util.toDateString('2025-03-08 12:30:00') === '2025-03-08 12:30:00',
        );
        console.log(util.toDateString('2025-03-08') === '2025-03-08 00:00:00');
        console.log(util.toDateString('2025-3-8') === '2025-03-08 00:00:00');
        console.log(util.toDateString('2025-3') === '2025-03-01 00:00:00');
        console.log(util.toDateString(null) === '');
        console.log(
          util.toDateString(undefined) === util.toDateString(new Date()),
        );
        console.log(util.toDateString('') === '');
        console.log(
          util.toDateString('2025/3/8 12:30:00') === '2025-03-08 12:30:00',
        );
        console.log(util.toDateString('2025/3/8') === '2025-03-08 00:00:00');
      });
    </script>
  </body>
</html>
